<template>
	<div>
		<p class="video">视频</p>
		<div class="select1">
			<div class="novel" v-for="(item,index) in datalist" :key="index">
				<router-link class="novel-content" to='booklist'>
					<img :src="item.url" alt="" width="51px" height="71" />
					<div class="subtime">
						<span class="title">{{item.title}}</span>
						<span class="num">{{item.num}}</span>
					</div>
				</router-link>
			</div>
		</div>
		<p class="audio">音频</p>
		<div class="select1">
			<div class="novel" v-for="(item,index) in datalist" :key="index">
				<router-link class="novel-content" to='booklist'>
					<img :src="item.url" alt="" width="51px" height="71" />
					<div class="subtime">
						<span class="title">{{item.title}}</span>
						<span class="num">{{item.num}}</span>
					</div>
				</router-link>
			</div>
		</div>

	</div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [
        {
          id: 1,
          url: "../../../../static/home/duzhe.png",
          title: "文摘文学",
          num: "2125本"
        },
        {
          id: 2,
          url: "../../../../static/home/duzhe.png",
          title: "校园学习",
          num: "115本"
        },
        {
          id: 3,
          url: "../../../../static/home/duzhe.png",
          title: "生活健康",
          num: "1215本"
        },
        {
          id: 4,
          url: "../../../../static/home/duzhe.png",
          title: "人文文化",
          num: "4115本"
        }
      ]
    };
  }
};
</script>

<style scoped>
.select4 {
  height: 100%;
  display: flex;
  justify-content: space-between;

  /*background: sandybrown;*/
  flex-wrap: wrap;
  margin: 12px 12px 0px 18px;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.novel4 {
  margin-bottom: 20px;
  /*background: skyblue;*/
}

.novel4 .novel-content4 {
  display: flex;
  justify-content: center;
}

.novel4 .novel-content4 img {
  border-radius: 8px;
}

.novel4 .subtime4 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 10px;
  width: 64px;
}
.novel4 .subtime4 span {
  width: 64px;
  word-wrap: break-word;
  word-break: normal;
}
.novel4 .subtime4 .title {
  font-size: 15px;
  color: #252525;
  margin-bottom: 10px;
}

.video,
.audio {
  margin-left: 18px;
  border-left: 2px solid #e60012;
  margin-top: 10px;
  line-height: 18px;
  padding-left: 5px;
}
</style>